<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：基础设置顶部
-->

<template>
	<div>
		<div style="padding-top:10px;">
			<Form ref="params"  :label-width="300" label-position="right">		
				<div style="width:100%;height: 120px;float:left;display:table;">
					<div style="width: 100%;text-align: left;float: left;" align="left">
						
						<div style="float:left;">
						    <FormItem label="图片1">
						    	<img :src="imgurlo1" style="width: 100px;height:auto;">	
							    <Upload
							        ref="upload1"
							        :show-upload-list="false"
							        :on-success="handleSuccess1"
							        :format="['jpg','jpeg','png']"
							        :max-size="2048"
							        :on-format-error="handleFormatError"
							        :on-exceeded-size="handleMaxSize" 
							        type="drag"
							        action="/stgl/filesUpload.html"
							        style="display: inline-block;width:80px;">
							        <div style="width: 80px;height:80px;line-height: 80px;">
							            <Icon type="ios-camera" size="20"></Icon>
							        </div>
							    </Upload>
						    </FormItem>
					    </div>
					   
					    <div class="demo-upload-list" style="float:left;padding-left:10px;">
					        <template v-if="photos1.status === 'finished'">
					            <img :src="imgurl11" style="width: 120px;height:auto;">
					            <div class="demo-upload-list-cover" style="text-align:center;">
					                <Icon type="ios-eye-outline" @click.native="handleView(1)"></Icon>
					                <Icon type="ios-trash-outline" @click.native="handleRemove1(photos1)"></Icon>
					            </div>
					        </template>
					        <template v-else>
					            <Progress v-if="photos1.showProgress" :percent="photos1.percentage" hide-info></Progress>
					        </template>
					    </div>
					    
							
						<Checkbox v-model="fs1check" style="padding-left:10px;">是否启用</Checkbox>
					</div>
				</div>
	
				<div style="width:100%;height: 120px;float:left;display:table;">
					<div style="width: 100%;text-align: left;float: left;" align="left">	
						<div style="float:left;">
						    <FormItem label="图片2">
						    	<img :src="imgurlo2" style="width: 100px;height:auto;">
							    <Upload
							        ref="upload2"
							        :show-upload-list="false"
							        :on-success="handleSuccess2"
							        :format="['jpg','jpeg','png']"
							        :max-size="2048"
							        :on-format-error="handleFormatError"
							        :on-exceeded-size="handleMaxSize"
							        
							        type="drag"
							        action="/stgl/filesUpload.html"
							        style="display: inline-block;width:80px;">
							        <div style="width: 80px;height:80px;line-height: 80px;">
							            <Icon type="ios-camera" size="20"></Icon>
							        </div>
							    </Upload>
						    </FormItem>
					    </div>
					   
					    <div class="demo-upload-list" style="float:left;padding-left:10px;">
					        <template v-if="photos2.status === 'finished'">
					            <img :src="imgurl12" style="width: 120px;height:auto;">
					            <div class="demo-upload-list-cover" style="text-align:center;">
					                <Icon type="ios-eye-outline" @click.native="handleView(2)"></Icon>
					                <Icon type="ios-trash-outline" @click.native="handleRemove2(photos2)"></Icon>
					            </div>
					        </template>
					        <template v-else>
					            <Progress v-if="photos2.showProgress" :percent="photos2.percentage" hide-info></Progress>
					        </template>
					    </div>
					    
						<Checkbox v-model="fs2check" style="padding-left:10px;">是否启用</Checkbox>
					</div>
				</div>
				
				<div style="width:100%;height: 120px;float:left;display:table;">
					<div style="width: 100%;text-align: left;float: left;" align="left">
					
						<div style="float:left;">
						    <FormItem label="图片3">
						    	<img :src="imgurlo3" style="width: 100px;height:auto;">
							    <Upload
							        ref="upload3"
							        :show-upload-list="false"
							        :on-success="handleSuccess3"
							        :format="['jpg','jpeg','png']"
							        :max-size="2048"
							        :on-format-error="handleFormatError"
							        :on-exceeded-size="handleMaxSize"
							        
							        type="drag"
							        action="/stgl/filesUpload.html"
							        style="display: inline-block;width:80px;">
							        <div style="width: 80px;height:80px;line-height: 80px;">
							            <Icon type="ios-camera" size="20"></Icon>
							        </div>
							    </Upload>
						    </FormItem>
					    </div>
					   
					    <div class="demo-upload-list" style="float:left;padding-left:10px;">
					        <template v-if="photos3.status === 'finished'">
					            <img :src="imgurl13" style="width: 120px;height:auto;">
					            <div class="demo-upload-list-cover" style="text-align:center;">
					                <Icon type="ios-eye-outline" @click.native="handleView(3)"></Icon>
					                <Icon type="ios-trash-outline" @click.native="handleRemove3(photos3)"></Icon>
					            </div>
					        </template>
					        <template v-else>
					            <Progress v-if="photos3.showProgress" :percent="photos3.percentage" hide-info></Progress>
					        </template>
					    </div>
					    
						<Checkbox  v-model="fs3check" style="padding-left:10px;">是否启用</Checkbox>
					</div>
				</div>
				
				<Modal title="图片预览" v-model="visible">
			        <img :src="imgurl" v-if="visible" style="width: 100%">
			    </Modal>
		
			</Form>	
		</div>
		<div style="width:100%;height: 60px;line-height: 60px;float:left;margin-bottom: 20px;">
			<Button type="info" style="float:left;margin-left:10%;" v-on:click="save()">保存</Button>
		</div>	
	</div>
</template>
<script>
	import _config from "../../../../config/config"
	export default {
		name:"home",
		data() {			
			return {
				fs1check:true, 
				fs2check:true,
				fs3check:true,
				
				visible: false,
				photos1: {},
				photos2: {},
				photos3: {},
				
				imgurl:'',
				//最终上传的图片
				imgurl1: '',
				imgurl2: '',
				imgurl3: '',
				//当前上传的图片
				imgurl11:'',
				imgurl12:'',
				imgurl13:'',
				//以前的的图
				imgurlo1:'',
				imgurlo2:'',
				imgurlo3:'',
				
			}
		},
		components: {
			
		},
		methods: {
			handleView (num) {
				if(num=="1"){
					this.imgurl=_config._ADMIN_SERVER+"/stgl/"+this.imgurl1;
				}else if(num=="2"){
					this.imgurl=_config._ADMIN_SERVER+"/stgl/"+this.imgurl2;
				}else if(num=="3"){
					this.imgurl=_config._ADMIN_SERVER+"/stgl/"+this.imgurl3;
				}
                this.visible = true;
            },
            handleRemove1 (file) {
                const fileList = this.$refs.upload1.fileList;
                this.$refs.upload1.fileList.splice(fileList.indexOf(file), 1);
                const photos={
                	status:'',
                	showProgress:"",
                	percentage:0
                }
                this.photos1=photos;
            },
            handleSuccess1 (res, file) {
              	const files=this.$refs.upload1.fileList;
                const photos={
                	status:'finished',
                	showProgress:files[0].showProgress,
                	percentage:files[0].percentage
                }
                this.photos1=photos;
                file.url = res[0].FILE_PATH;
                file.name =res[0].FILE_NAME;
                this.imgurl1=res[0].FILE_PATH;
                this.imgurl11=_config._ADMIN_SERVER+"/stgl/"+res[0].FILE_PATH;
            },
            
            
            
            handleRemove2 (file) {
                const fileList = this.$refs.upload2.fileList;
                this.$refs.upload2.fileList.splice(fileList.indexOf(file), 1);
                const photos={
                	status:'',
                	showProgress:"",
                	percentage:0
                }
                this.photos2=photos;
            },
            handleSuccess2 (res, file) {
              	const files=this.$refs.upload2.fileList;
                const photos={
                	status:'finished',
                	showProgress:files[0].showProgress,
                	percentage:files[0].percentage
                }
                this.photos2=photos;
                file.url = res[0].FILE_PATH;
                file.name =res[0].FILE_NAME;
                this.imgurl2=res[0].FILE_PATH;
                this.imgurl12=_config._ADMIN_SERVER+"/stgl/"+res[0].FILE_PATH;
            },
            
            
            
            handleRemove3 (file) {
                const fileList = this.$refs.upload3.fileList;
                this.$refs.upload3.fileList.splice(fileList.indexOf(file), 1);
                const photos={
                	status:'',
                	showProgress:"",
                	percentage:0
                }
                this.photos3=photos;
            },
            handleSuccess3 (res, file) {
              	const files=this.$refs.upload3.fileList;
                const photos={
                	status:'finished',
                	showProgress:files[0].showProgress,
                	percentage:files[0].percentage
                }
                this.photos3=photos;
                file.url = res[0].FILE_PATH;
                file.name =res[0].FILE_NAME;
                this.imgurl3=res[0].FILE_PATH;
                 this.imgurl13=_config._ADMIN_SERVER+"/stgl/"+res[0].FILE_PATH;
            },
            
            
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            
            getimageset(){
            	this.$http.post("/host/stgl/getsystemSet.html",{csid:this.user.CSID})
				.then(datas => {
					const top1=_config._ADMIN_SERVER+"/stgl/"+"/wx/topimg1.jpg";
					if(datas.TOPIMAGE1){
						this.imgurl1=datas.TOPIMAGE1;
						this.imgurl11=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE1;
						this.imgurlo1=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE1;
					}else{
						this.imgurl11=top1;
						this.imgurlo1=top1;	
					}
					
					const top2=_config._ADMIN_SERVER+"/stgl/"+"/wx/topimg2.jpg";
					if(datas.TOPIMAGE2){
						this.imgurl2=datas.TOPIMAGE2;
						this.imgurl12=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE2;
						this.imgurlo2=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE2;
					}else{
						this.imgurl12=top2;
						this.imgurlo2=top2;	
					}
					
					const top3=_config._ADMIN_SERVER+"/stgl/"+"/wx/topimg3.jpg";
					if(datas.TOPIMAGE3){
						this.imgurl3=datas.TOPIMAGE3;
						this.imgurl13=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE3;
						this.imgurlo3=_config._ADMIN_SERVER+"/stgl/"+datas.TOPIMAGE3;
					}else{
						this.imgurl13=top3;
						this.imgurlo3=top3;	
					}

					if(datas.TOPIMAGE1S=="0"){
						this.fs1check=true;
					}else{
						this.fs1check=false;
					}
					if(datas.TOPIMAGE2S=="0"){
						this.fs2check=true; 
					}else{
						this.fs2check=false;
					}
					if(datas.TOPIMAGE3S=="0"){
						this.fs3check=true;
					}else{
						this.fs3check=false;
					}
				});	
           },
            
            
            
            save(){
				var topimage1s=1;
				if(this.fs1check){
					topimage1s=0;
				}
				var topimage2s=1;
				if(this.fs2check){
					topimage2s=0;
				}
				var topimage3s=1;
				if(this.fs3check){
					topimage3s=0;
				}

				const params={
					topimage1s:topimage1s,
					topimage2s:topimage2s,
					topimage3s:topimage3s,
					topimage1:this.imgurl1,
					topimage2:this.imgurl2,
					topimage3:this.imgurl3,
					csid:this.user.CSID,
				}
				this.$http.post("/host/stgl/updateSystemName.html",params)
				.then(datas => {
					if(datas){
						this.$Modal.success({
                            title: "提示",
                            content: "保存成功"
                        });	
					}else{
						this.$Modal.error({
                            title: "提示",
                            content:"保存失败"
                        });	
					}
				});
				
			}
            
            
		},
		mounted(){	
			//获取图片信息
			this.getimageset();
		},
		watch:{
			
		},
		computed: {
			user: function() {
				return this.$store.state.app.user;
			}
		},
	}
</script>

<style>
</style>



